<template>
  <div class="login">
    <div class="page-header">
      <h1>登录页 <small>请输入用户名和密码</small></h1>
    </div>
    <div class="text-center">
      <div class="input-group input-group-lg center-block">
        <input type="text" placeholder="请输入用户名" class="input-lg" v-model="un" ><br><br>
        <input type="text" placeholder="请输入密码" class="input-lg" v-model="pw" ><br><br>
        <button class="btn btn-primary btn-lg" @click="userLogin()" >登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs';
export default {
  name: "Login",
  data(){
    return {
      un:'',
      pw:''
    }
  },
  methods:{
    userLogin(){
      this.axios.post("/api1/login",
          qs.stringify({username:this.un,password:this.pw})
      ).then(response=>{
        console.log(response);
        if (response.status === 'ok'){
          this.$router.push('/product');
        }else if(response.status === 'noUser'){
          alert("用户名密码错误！");
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>
  .login{

  }
</style>